<template>
  <div class="shop_car b_color">
    <el-row class="p_20">
      <el-col :span="6" :offset="16">
        <el-steps
          :space="200"
          :active="active"
          finish-status="success"
          style="text-align: left; margin-top: 50px"
        >
          <el-step title="步骤 1" style="font-size: 5px"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step title="步骤 3"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <el-row class="tab_top" style="line-height: 50px">
      <el-col :span="1" :offset="2">
        <div class="">
          <el-checkbox @change="handleCheckedAllChange">全选</el-checkbox>
        </div>
      </el-col>
      <el-col :span="4" :offset="2">
        <div class="">商品名称</div>
      </el-col>
      <el-col :span="2">
        <div class="">单价</div>
      </el-col>
      <el-col :span="6">
        <div class="">数量</div>
      </el-col>
      <el-col :span="2">
        <div class="">小结</div>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" size="mini" @click="clearShopCar"
          >清空购物车</el-button
        >
      </el-col>
    </el-row>
    <!-- 购物车 内容 -->
    <el-row
      class="tab_content"
      style="line-height: 80px; border: 2px solid rgba(0, 0, 0, 0.1)"
      v-for="(item, index) in storecarlist.items"
      :key="index"
    >
      <el-row>
        <el-col :span="1" :offset="2">
          <el-checkbox
            v-model="item.check"
            @change="handleCheckedCitiesChange(item.goodsId, item.check)"
          ></el-checkbox>
        </el-col>
        <el-col :span="2">
          <img
            style="width: 50px; height: 50px; padding-top: 15px"
            :src="'http://42.194.142.165:8088/sharePath/' + item.image"
            alt=""
          />
        </el-col>
        <el-col :span="4">
          <div class="font_hidden" :title="item.title">
            {{ item.title }}
          </div>
        </el-col>
        <el-col :span="2">
          <div class="">{{ item.price }}</div>
        </el-col>
        <el-col :span="6">
          <el-input-number
            v-model="item.count"
            @change="handleChangeNum(item.goodsId, item.count)"
            :min="1"
            :max="item.wareCount"
            size="mini"
            label="描述文字"
          ></el-input-number>
        </el-col>
        <el-col :span="2">
          <div class="">
            {{ item.count * item.price }}
          </div>
        </el-col>
        <el-col :span="2">
          <el-button
            type="danger"
            size="mini"
            @click="deleteGoods(item.goodsId)"
            >删除</el-button
          >
        </el-col>
      </el-row>
    </el-row>
    <!--  -->
    <el-row class="tab_bottom p_20">
      <el-col :span="2" :offset="2">
        <el-button @click="handleIndex">继续购物</el-button>
      </el-col>
      <el-col
        :span="7"
        :offset="2"
        style="text-align: center; line-height: 50px"
      >
        <div class="">
          共有<i class="num f_color">{{ storecarlist.countNum }}</i
          >件商品，已选<i class="select_num f_color">{{
            storecarlist.selectCount
          }}</i
          >类商品
        </div>
      </el-col>
      <el-col :span="4" :offset="1" style="text-align: center">
        <div class="f_color">
          合计:<i class="big_f">{{ storecarlist.totalAmount }}</i
          >元
        </div>
      </el-col>
      <el-col :span="3" :offset="1">
        <el-button type="warning" @click="outshop()">去结算</el-button>
      </el-col>
    </el-row>
    <!-- <el-row class="shop_list">
      <el-col :span="6" :offset="2">
        <hr class="bg-purple" />
      </el-col>
      <el-col :span="8">
        <div class="shop_list_title bg-purple" style="text-align: center">
          热销商品了解一下
        </div>
      </el-col>
      <el-col :span="6">
        <hr class="bg-purple" />
      </el-col>
    </el-row> -->
    <!-- 热卖商品 -->
    <!-- <el-row class="shop_list_cogo"></el-row> -->
  </div>
</template>

<script>
export default {
  name: "Shop_Car",
  data() {
    return {
      storecarlist: [],
      total: "",
      addForm: {},
      active: 0,
    };
  },
  components: {},
  methods: {
    async handleChangeNum(goodsId, num) {
      console.log(goodsId, num);
      const { data: res } = await this.$axios.post(
        "cart/add/count?goodsId=" + goodsId + "&num=" + num,
        {}
      );
      if (res.meta.status == 200) {
        this.showShopCar();
        return this.$message.success("修改商品数量成功!");
      } else {
        return this.$message({ message: res.meta.msg, type: "error" });
      }
    },
    outshop() {
      this.handlePutOrder();
      this.$router.push("/shopBook");
    },
    // 清空购物车
    clearShopCar() {
      this.$confirm("是否继续清空购物车?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete("cart/clear", {})
            .then((res) => {
              if (res.data.meta.status !== 200) {
                return this.$message.error("删除失败！");
              }
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.showShopCar();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除购物车单项商品
    deleteGoods(goodsId) {
      this.$confirm("是否继续该商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete("cart/" + goodsId, {})
            .then((res) => {
              if (res.data.meta.status !== 200) {
                return this.$message.error("删除失败！");
              }
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.showShopCar();
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 渲染购物车
    showShopCar() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)",
      });
      this.$axios
        .get("cart/list", {})
        .then((res) => {
          if (res.data.meta.status == 200) {
            console.log(res);
            this.storecarlist = res.data.data;
            loading.close();
            return true;
          } else if (res.data.meta.status == 501) {
            this.$router.push("login");
            loading.close();
            return this.$message.error("请先登录！");
          }
          loading.close();
          return this.$message({
            message: res.mate.msg,
            type: "error",
          });
        })
        .catch((err) => {
          console.log(err);
          loading.close();
        });
    },
    handleCheckAllChange(val) {
      console.log(val);
    },
    async handleCheckedCitiesChange(goodsId, check) {
      const { data: res } = await this.$axios.post(
        "cart/select?goodsId=" + goodsId + "&check=" + (check ? 1 : 0),
        {}
      );
      console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error("选择失败!");
      } else {
        this.showShopCar();
      }
    },
    async handleCheckedAllChange(value) {
      if (value) {
        const { data: res } = await this.$axios.post("cart/select/all", {});
        console.log(res);
        if (res.meta.status !== 200) {
          return this.$message.error("选择失败!");
        } else {
          this.showShopCar();
        }
      } else {
        const { data: res } = await this.$axios.post("cart/done/all", {});
        console.log(res);
        if (res.meta.status !== 200) {
          return this.$message.error("选择失败!");
        } else {
          this.showShopCar();
        }
      }
    },
    async handlePutOrder() {
      const { data: res } = await this.$axios.get("order", {});
      console.log(res);
      if (res.meta.status == 200) {
        window.sessionStorage.setItem("orderToken", res.data.orderToken);
      } else {
        return this.$message({ message: res.meta.msg, type: "error" });
      }
    },
    handleIndex() {
      this.$router.push("/index");
    },
    // /front/mi/api/cart/list
  },
  created() {
    this.showShopCar();
  },
};
</script>

<style scoped>
.shop_car {
  font-size: 5px;
}
.p_20 {
  padding-bottom: 20px;
}
/* 颜色 */
.f_color {
  color: rgb(245, 102, 0);
  margin: 0 2px;
}
.b_color {
  background-color: white;
}
/* 头部 */
.shop_car_header {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  margin-bottom: 10px;
}
/* logo */
.normal_header_logo img {
  height: 36px;
  margin-top: 8px;
}
.normal_header_logo span {
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  margin-left: 5px;
}
.headline {
  font-size: 20px;
}
.tip {
  font-size: 5px;
}
/* 用户名 我的订单 */
.normal_header_user {
  height: 50px;
  line-height: 50px;
}
.normal_header_user .el-link {
  margin-left: 12px;
  font-size: 5px;
}
/* hr */
.hr_24span hr {
  background-color: rgb(245, 102, 0);
  height: 1px;
}
/* 购物车 表头 */
.tab_top {
  margin: 40px 0px;
  font-size: 6px;
  font-weight: bold;
}
/* 购物车 表尾 */
.tab_bottom {
  margin: 40px 0px;
}
.tab_shopdie {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  margin-bottom: 10px;
  color: white;
}
.m_r_10 {
  margin-right: 10px;
}
.big_f {
  font-size: 24px;
}
.font_hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 热卖 */
.shop_list {
  height: 50px;
  line-height: 50px;
}
.shop_list .shop_list_title {
  margin-top: 8px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
}
.shop_list hr {
  height: 1px;
  margin-top: 24px;
}
</style>
